//WIDTH and HEIGHT need to be changed according to the canvas size!!!

var WIDTH = 800;
var HEIGHT = 600;
var canvas;
var ctx;
var drawInt = 10;						//how often the canvas is drawn
var imageObj = new Image();
var clikX;
var clikY;
var i = 0;
var dx = 2;
var dy = 2;
var x = 150;
var y = 100;
var charNum = 4;
var counting = false;
var count = 0;

function character(x, y, chName)
{
	imageObj.src = "img/".concat(chName, ".png");
    ctx.drawImage(imageObj, x, y);
}
function buttons()
{
	ctx.fillStyle = "red";
	rect(100, 100, 200, 50);
	rect(100, 200, 200, 50);
	rect(100, 300, 200, 50);
	rect(100, 400, 200, 50);
	ctx.font = "30pt Calibri";
	ctx.fillStyle = "blue";
	ctx.fillText("Bloop", 120, 140);
	ctx.fillText("Oswald", 120, 240);
	ctx.fillText("Brian", 120, 340);
	ctx.fillText("Steven", 120, 440);
}
function rect(x, y, w, h)
{
	ctx.beginPath();
	ctx.rect(x, y, w, h);
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
}
function clear()
{
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
//instead of doKeyDown function in original, i added
//an array and three functions:
//key mgmt
var keys = new Array();
function doKeyDown(evt)
{
	keys[evt.keyCode] = true;
}
function doKeyUp(evt)
{
	keys[evt.keyCode] = false;
}
function move()
{
	if (38 in keys && keys[38] && y > 0)
	{ //up
		y -= dy;
	}
	if (40 in keys && keys[40] && y < HEIGHT)
	{ //down
		y += dy;
	}
	if (37 in keys && keys[37] && x >0)
	{ //left
		x -= dx;
	}
	if (39 in keys && keys[39] && x < WIDTH)
	{ //right
		x += dx;
	}
}
function swing(Cx, Cy)
{
	clikX = Cx;
	clikY = Cy;
	ctx.strokeStyle = "white";
	ctx.lineWidth = 7;
	if(Cx > x)
	{
		ctx.moveTo(x+50, y+30);
		ctx.lineTo(x+80, y+30);
	}
	else if(Cx < x)
	{
		ctx.moveTo(x-10, y+30);
		ctx.lineTo(x-40, y+30);
	}
	else
		;
	ctx.stroke();
	counting = true;
}
function shoot(Cx, Cy) //the x and y coordinates of where the click occured
{
	//clikX = Cx;
	//clikY = Cy;
	count = 0;
	ctx.fillStyle = "red";
	ctx.beginPath();
	ctx.arc(Cx, Cy, 10, 0, Math.PI*2, true);
	ctx.fill();
	counting = true;
}
//i rearranged function "draw":
function draw(isGame, cName)
{
	if(isGame)
	{
		//movement, other between frame logic
		move();
		//stage maintenence
	}
	clear();
	if(isGame)
	{
		ctx.fillStyle = "gray";
	}
	else
	{
		ctx.fillStyle = "cyan";
	}
	ctx.strokeStyle = "black";
	rect(0,0,WIDTH,HEIGHT);
	if(isGame)
	{
		//draw actor
		character(x, y, cName);
	}
	else
	{
		buttons();
	}
	if(counting)
	{
		//if(cName == "Oswald")
			//shoot(clikX, clikY);
		//else if(cName == "Bloop")
			swing(clikX, clikY);
		if(count > 50)
		{
			counting = false;
			count = 0;
		}	
		count++;
	}
}